<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>

  <!-- 资料上传 -->
  <div>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
      资料上传
    </button>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
      aria-labelledby="staticBackdropLabel" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="staticBackdropLabel">资料修改</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="mbox">
              <div class="title">
                你可以在这里对个人资料进行修改完善
              </div>
              <div class="phone">
                手机号：&nbsp;&nbsp;&nbsp;&nbsp;xxxxxxxxxxx&nbsp;&nbsp;&nbsp;&nbsp;<span>* 手机号暂时不允许修改，如需修改 请联系我们</span>
              </div>
              <div class="img">
                设置头像：
                <div class="box">
                  <img src="./images/whk/u375.png" alt="">
                </div>
                <input type="file" placeholder="上传头像">
              </div>
              <div class="name">
                姓名： &nbsp;&nbsp;&nbsp; <input type="text">
              </div>
              <div class="sex">
                性别： &nbsp;&nbsp;&nbsp;<input type="radio" name="sex" id="man"> <label for="man">男 </label>
                <input type="radio" name="sex" id="woman"> <label for="woman">女</label>
              </div>
            </div>

          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary">保存提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 答题 -->
  <div class="dati">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      答题
    </button>
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"> 交卷确认</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="jiaojuan">
              <div class="text">
                总题数: <span>10</span>
              </div>
              <div class="text">
                已答题: <span>10</span>
              </div>
              <div class="textred">
                未答题: <span>10</span>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">再检查下</button>
            <button type="button" class="btn btn-primary">交卷</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 主页 -->
  <div class="dati1">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#zhuye">
      主页
    </button>
    <!-- Modal -->
    <div class="zhuye">
      <div class="modal fade" id="zhuye" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body">
              今日的每日一测数据我们已经为您准备好啦，赶紧来测试吧！
              <div class="text">
                <p>立即去测试</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="box4">
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#paihang">
      排行榜
    </button>
    <!-- Modal -->
    <div class="zhuye">
      <div class="modal fade" id="paihang" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <div class="box">
                <h5>正式考试排行 TOP10</h5>
                <select name="" id="">
                  <option value="">2019年xxxxx第三季度电力知识模拟考试</option>
                  <option value="" selected>2019年xxxxx第三季度电力知识模拟考试</option>
                  <option value="">2019年xxxxx第三季度电力知识模拟考试</option>
                </select>
              </div>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <div class="paiming">
                <div class="left">
                  <p>未上榜</p>
                  <p>我自己</p>
                </div>
                <p>98分</p>
              </div>
              <div class="paiming2">
                <div class="left">
                  <p>未上榜</p>
                  <p>我自己</p>
                </div>
                <p>98分</p>
              </div>
              <div class="paiming2">
                <div class="left">
                  <p>未上榜</p>
                  <p>我自己</p>
                </div>
                <p>98分</p>
              </div>
              <div class="paiming2">
                <div class="left">
                  <p>未上榜</p>
                  <p>我自己</p>
                </div>
                <p>98分</p>
              </div>
              <div class="paiming2">
                <div class="left">
                  <p>未上榜</p>
                  <p>我自己</p>
                </div>
                <p>98分</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</body>

</html>